<template>
  <div class="search" @touchmove.prevent @mousewheel.prevent>
      <input type="text"  placeholder="输入城市名或拼音" class="city-input" v-model="keywords">
      <div ref="searchInfo" class="search-content">
        <ul>
         <li v-for="item of searchInfo" :key="item.id" class="li"  @click="hand2(item.name)">
           {{item.name}}
         </li>
         <li v-show="flag"  class="li">{{msg}}</li>
      </ul>
      </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import {mapMutations } from 'vuex'
export default {
    name:'CitySearch',
    data(){
      return{
            keywords:'',
            timer:null,
            searchInfo:[],
            msg:"无法匹配相关信息",
            flag:false
      }
    },
    watch:{
      searchInfo (){
        if(this.searchInfo.length!=0){
            this.flag==false
            console.log(11);
        }else{
           this.flag==true
        }
      }
    },
    mounted(){
         this.scroll=new Bscroll(this.$refs.searchInfo, { click: true});
    },
    props:{allInfo:Object},
    watch:{
      keywords(){
        if(this.keywords==''){
            this.hand(true)
        }else{
          this.hand(false)
        }
        if(this.timer){
          clearTimeout(this.timer)
        }
        this.timer=setTimeout(()=>{
              const result=[]
              if(this.keywords!=''){
                for(let i in this.allInfo){
                this.allInfo[i].forEach(value=>{
                    if(value.spell.indexOf(this.keywords.trim())!=-1 || value.name.indexOf(this.keywords.trim())!=-1){
                      result.push(value)
                    }
                })
              }
              }
                this.searchInfo=result
                result.length==0? this.flag=true:this.flag=false
        },100)
      }
    },
    methods:{
      hand(bool){
        this.$emit('isShow',bool)
      },
       hand2 (city){//点击搜索出来的城市 会切换
         console.log(123);
        //   this.$store.commit('chang',city)
         this.chang(city)
          this.$router.push('/')
        },
          ...mapMutations(['chang'])
    }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/varibles.styl' 
.search
    height .7rem
    background $bgColor
    padding .1rem
    position relative
    .city-input
        box-sizing border-box
        margin-top .04rem
        width 100%
        background #fff
        height .6rem
        line-height .6rem
        text-align center
        border-radius .06rem
        border .02rem solid gray
        outline none 
        padding .2rem
    .search-content
        background-color #fff
        height calc(100vh - .7rem)
        width 100%
        overflow hidden
        margin-top .2rem
        .li
            ine-height .4rem
            height .4rem
            font-size .36rem
            padding .1rem .2rem
            border-top .02rem solid rgba(204, 203, 203,.5)

        
</style>